import 'dart:io';
import 'package:image_picker_plus_nic/src/entities/app_theme.dart';
import 'package:image_picker_plus_nic/src/custom_packages/crop_image/crop_image.dart';
import 'package:flutter/material.dart';

// 裁切view
class CropImageView extends StatefulWidget {
  final ValueNotifier<GlobalKey<CustomCropState>> cropKey;
  final ValueNotifier<List<int>> indexOfSelectedImages;

  final ValueNotifier<bool> multiSelectionMode;
  final ValueNotifier<bool> expandImage;
  final ValueNotifier<double> expandHeight;
  final ValueNotifier<bool> expandImageView;

  /// To avoid lag when you interacting with image when it expanded
  final ValueNotifier<bool> enableVerticalTapping;
  final ValueNotifier<File?> selectedImage;

  final VoidCallback clearMultiImages;

  final AppTheme appTheme;
  final ValueNotifier<bool> noDuration;
  final Color whiteColor;
  final double? topPosition;

  const CropImageView({
    Key? key,
    required this.indexOfSelectedImages,
    required this.cropKey,
    required this.multiSelectionMode,
    required this.expandImage,
    required this.expandHeight,
    required this.clearMultiImages,
    required this.expandImageView,
    required this.enableVerticalTapping,
    required this.selectedImage,
    required this.appTheme,
    required this.noDuration,
    required this.whiteColor,
    this.topPosition,
  }) : super(key: key);

  @override
  State<CropImageView> createState() => _CropImageViewState();
}

class _CropImageViewState extends State<CropImageView> {
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: widget.enableVerticalTapping,
      builder: (context, bool enableTappingValue, child) => GestureDetector(
        onVerticalDragUpdate: enableTappingValue && widget.topPosition != null
            ? (details) {
                widget.expandImageView.value = true;
                widget.expandHeight.value = details.globalPosition.dy - 56;
                setState(() => widget.noDuration.value = true);
              }
            : null,
        onVerticalDragEnd: enableTappingValue && widget.topPosition != null
            ? (details) {
                widget.expandHeight.value =
                    widget.expandHeight.value > 260 ? 360 : 0;
                if (widget.topPosition == -360) {
                  widget.enableVerticalTapping.value = true;
                }
                if (widget.topPosition == 0) {
                  widget.enableVerticalTapping.value = false;
                }
                setState(() => widget.noDuration.value = false);
              }
            : null,
        child: ValueListenableBuilder(
          valueListenable: widget.selectedImage,
          builder: (context, File? selectedImageValue, child) {
            //print('selectedImageValue=$selectedImageValue');
            if (selectedImageValue != null) {
              return showSelectedImage(context, selectedImageValue);
            } else {
              return Container(key: GlobalKey(debugLabel: "do not have"));
            }
          },
        ),
      ),
    );
  }

  Container showSelectedImage(BuildContext context, File selectedImageValue) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      key: GlobalKey(debugLabel: "have image"),
      color: widget.whiteColor,
      height: 360,
      width: width,
      child: ValueListenableBuilder(
        valueListenable: widget.multiSelectionMode,
        builder: (context, bool multiSelectionModeValue, child) => Stack(
          children: [
            ValueListenableBuilder(
              valueListenable: widget.expandImage,
              builder: (context, bool expandImageValue, child) =>
                  cropImageWidget(selectedImageValue, expandImageValue),
            ),
          ],
        ),
      ),
    );
  }

  Widget cropImageWidget(File selectedImageValue, bool expandImageValue) {
    GlobalKey<CustomCropState> cropKey = widget.cropKey.value;
    String path = selectedImageValue.path;
    bool isThatVideo = path.contains("mp4", path.length - 5);
    return Container(
      color: Colors.white,
      child: Container(
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          //color: Colors.green,
        ),
        child: CustomCrop(
          image: selectedImageValue,
          isThatImage: !isThatVideo,
          key: cropKey,
          paintColor: widget.appTheme.primaryColor,
          aspectRatio: expandImageValue ? 6 / 8 : 1.0,
        ),
      ),
    );
  }
}
